import React, { Component } from 'react';
import { Button, Input, Checkbox, message, Form } from 'antd';
import { observer, inject } from 'mobx-react';
import { loginApi } from '../../service/auth';
import Cookies from 'js-cookie';
import { encrypt, decrypt } from '../../utils/utils';

import './login.css';
const layout = {
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 16,
  },
};
const tailLayout = {
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 24,
  },
};
@inject('userStore')
@observer
class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      formValue: {},
      defaultValue: {
        username: '',
        password: '',
        remember: '',
      },
    };
  }
  enterLogin = () => {
    let remember, username, password;
    if (JSON.stringify(this.state.formValue) != '{}') {
      remember = this.state.formValue.remember;
      username = this.state.formValue.username;
      password = this.state.formValue.password;
    } else {
      username = Cookies.get('userName');
      password = decrypt(Cookies.get('pwd'));
      remember = Cookies.get('rember');
    }
    let pwd = encrypt(password);
    let reqParams = { username: username, password: pwd }; //请求参数
    // 发起登录接口的请求;
    loginApi('/login', reqParams).then(data => {
      if (data.code === 200) {
        if (remember) {
          //记住密码
          let encryption = encrypt(password); //加密
          Cookies.set('userName', username);
          Cookies.set('pwd', encryption);
          Cookies.set('remember', true);
        } else {
          //不记住密码
          if (Cookies.get('userName')) {
            Cookies.remove('userName');
            Cookies.remove('pwd');
            Cookies.set('remember', false);
          }
        }
        Cookies.set('expires', data.data.expires);
        Cookies.set('token', data.data.token);
        this.props.userStore.GetInfo();
        this.props.userStore.loginUser(data.data); //默认登录成功
        this.props.history.push('/Main/Home');
      }
    });
  };
  valuesChange = (changedValues, allValues) => {
    this.setState(state => {
      return (state.formValue = allValues);
    });
  };
  componentDidMount() {
    if (Cookies.get('userName')) {
      let username = Cookies.get('userName');
      let password = decrypt(Cookies.get('pwd'));
      let remember = 'true';
      let obj = Object.assign({}, this.state.defaultValue, { username, password, remember });
      this.setState({
        loading: true,
        defaultValue: obj,
      });
    } else {
      this.setState({
        loading: true,
      });
    }
  }
  render() {
    let { loading, defaultValue } = this.state;
    return (
      <div className="container flex-center login-container">
        <div className="w20 h40 login-main">
          <div className="center title">
            <span>登录</span>
          </div>
          <div className="center login-form">
            {loading ? (
              <Form
                {...layout}
                name="basic"
                onValuesChange={this.valuesChange}
                initialValues={defaultValue}
              >
                <Form.Item
                  label="用户名"
                  name="username"
                  rules={[{ required: true, message: 'Please input your username!' }]}
                >
                  <Input />
                </Form.Item>

                <Form.Item
                  label="密码"
                  name="password"
                  rules={[{ required: true, message: 'Please input your password!' }]}
                >
                  <Input.Password />
                </Form.Item>

                <Form.Item {...tailLayout} name="remember" valuePropName="checked">
                  <Checkbox>记住密码</Checkbox>
                </Form.Item>

                <Form.Item {...tailLayout}>
                  <Button type="primary" htmlType="submit" onClick={this.enterLogin}>
                    登录
                  </Button>
                </Form.Item>
              </Form>
            ) : (
              ''
            )}
          </div>
        </div>
      </div>
    );
  }
}

export default Login;
